import * as React from 'react'
import AddLocationAlt  from '@mui/icons-material/AddLocationAlt';
import style from './index.module.scss';
import Search from '@mui/icons-material/Search';
import Message from '../Message';

export default function Nav() {
    const [message, setMessage] = React.useState({
        flag: false,
        content: '信息'
    })
    const addressClick = () => {
        handleClickOpen();
    }
    const handleClickOpen = () => {
        setMessage({
            flag: true,
            content: '暂时不支持定位哦!'
        })
    };
    


    const rightClick = () => {
        setMessage({
            flag: true,
            content: '暂时不支持签到哦!'
        })
    }
    const close = () => {
        setMessage({
            flag: false,
            content: '暂时不支持签到哦!'
        })
    }

    return (
        <>
            <Message {...message} close={close}></Message>
            <div className={style.nav}>
                <div className={style.left} onClick={addressClick}>
                    <AddLocationAlt style={{color: '#FFF'}} fontSize="18"></AddLocationAlt>
                    <div className={style.left_text}>
                        长沙市
                    </div>
                </div>  
                <div className={style.center}>
                    <Search  style={{color: '#FFF',zIndex: 999}} fontSize="18"></Search>
                    <div className={style.center_text}>
                        搜索职业
                    </div>
                </div>
                <div className={style.right} onClick={rightClick}>
                    <img  className={style.img} src="https://sls-cloudfunction-ap-guangzhou-code-1309209904.cos.ap-guangzhou.myqcloud.com/qd.png" alt="签到" />
                </div>
            </div>
        </>
    )
}
